<template>
  <div class="mainBody">

    <div>实时观测时间:{{cc.dt}}</div>
    <div>气象站名称:{{cc.station}}</div>
    <div>温度:{{cc.t}}</div>
    <div>天气情况描述:{{cc.txt}}</div>
    <div>观测距离:{{cc.dist}}</div>
    <div>紫外线指数:{{cc.uv}}</div>
    <div>体感温度:{{cc.tf}}</div>
    <div>风速:{{cc.dt}}</div>
    <div>风向:{{cc.wn}}</div>
    <div>相对湿度:{{cc.rh}}</div>
    <div>可见度:{{cc.v}}</div>
    <div>降水量:{{cc.pr}}</div>
    <div>露点:{{cc.td}}</div>
    <div>气压变化趋势:{{cc.prestend}}</div>
    <div>可见度:{{cc.v}}</div>
    <div>云层覆盖率:{{cc.c}}</div>
    <button @click="getData()">获未来天气预报</button>
    <div id="main" style="width:1200px;height:400px"></div>
    <div id="main3" style="width:1200px;height:400px"></div>
    <div id="main2" style="width:1200px;height:400px"></div>

    <div id="main4" style="width:1200px;height:400px"></div>
    <div id="main5" style="width:1200px;height:400px"></div>
    <div id="main6" style="width:1200px;height:400px"></div>
    <div id="main7" style="width:1200px;height:400px"></div>
    <div id="main8" style="width:1200px;height:400px"></div>
    <div id="main9" style="width:1200px;height:400px"></div>
    <div id="main10" style="width:1200px;height:400px"></div>
    <div id="main11" style="width:1200px;height:400px"></div>
    <div id="main12" style="width:1200px;height:400px"></div>
    <div id="main13" style="width:1200px;height:400px"></div>
    <div id="main14" style="width:1200px;height:400px"></div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data(){
    return{
      cc:{},
      fch:[],
      t:[],
      dt:[],
      rh:[],
      pr:[],
      ws:[],
      wn:[],
      p:[],
      pp:[],
      c:[],
      tp:[],
      td:[],
      uv:[],
      v:[],
      upt:[],
      tf:[]
    }
  },
  methods:{
    getData(){
      var _this = this
      this.$axios.get('http://47.94.173.1:9000/get_info')
      .then(function(res){
        _this.cc = res.data.cc
        _this.fch = res.data.fch
        for(let i = 0;i< _this.fch.length;i++){
          _this.t[i] = _this.fch[i].t
          _this.dt[i] = _this.fch[i].dt
          _this.rh[i] = _this.fch[i].rh
          _this.tf[i] = _this.fch[i].tf
          _this.pr[i] = _this.fch[i].pr
          _this.ws[i] = _this.fch[i].ws
          _this.p[i] = _this.fch[i].p
          _this.pp[i] = _this.fch[i].pp
          _this.c[i] = _this.fch[i].c
          _this.uv[i] = _this.fch[i].uv
          _this.v[i] = _this.fch[i].v
          _this.tp[i] = _this.fch[i].tp
          _this.td[i] = _this.fch[i].td
        }

        for(let i = 0;i< _this.dt.length;i++){
          _this.dt[i] = _this.dt[i].substring(11,16)
        }

        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
              text: '未来一天温度变化'
            },
            xAxis: {
              data: _this.dt
            },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} ℃'
            }
          },
            series: [{
             data: _this.t,
              type: 'line'
            }]
        };
        myChart.setOption(option);

        var myChart2 = echarts.init(document.getElementById('main2'));
        var option2 = {
            title: {
              text: '未来一天相对湿度'
            },
            xAxis: {
              data: _this.dt
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} %'
              }
            },
            series: [{
             data: _this.rh,
              type: 'line'
            }]
        };
        myChart2.setOption(option2);

        var myChart3 = echarts.init(document.getElementById('main3'));
        var option3 = {
          title: {
            text: '未来一天体感温度变化'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} ℃'
            }
          },
          series: [{
            data: _this.tf,
            type: 'line'
          }]
        };
        myChart3.setOption(option3);

        var myChart4 = echarts.init(document.getElementById('main4'));
        var option4 = {
          title: {
            text: '未来一天降水量'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} mm'
            }
          },
          series: [{
            data: _this.tf,
            type: 'line'
          }]
        };
        myChart4.setOption(option4);


        var myChart5 = echarts.init(document.getElementById('main5'));
        var option5 = {
          title: {
            text: '未来一天风速'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} m/s'
            }
          },
          series: [{
            data: _this.ws,
            type: 'line'
          }]
        };
        myChart5.setOption(option5);

        var myChart6 = echarts.init(document.getElementById('main6'));
        var option6 = {
          title: {
            text: '未来一天平均大气压'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} pa'
            }
          },
          series: [{
            data: _this.p,
            type: 'line'
          }]
        };
        myChart6.setOption(option6);
        var myChart7 = echarts.init(document.getElementById('main7'));
        var option7 = {
          title: {
            text: '未来一天降水概率'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [{
            data: _this.pp,
            type: 'line'
          }]
        };
        myChart7.setOption(option7);


        var myChart8 = echarts.init(document.getElementById('main8'));
        var option8 = {
          title: {
            text: '未来一天云层覆盖率'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [{
            data: _this.c,
            type: 'line'
          }]
        };
        myChart8.setOption(option8);

        var myChart9 = echarts.init(document.getElementById('main9'));
        var option9 = {
          title: {
            text: '未来一天雷雨概率'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          },
          series: [{
            data: _this.tp,
            type: 'line'
          }]
        };
        myChart9.setOption(option9);

        var myChart10 = echarts.init(document.getElementById('main10'));
        var option10 = {
          title: {
            text: '未来一天露点'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} ℃'
            }
          },
          series: [{
            data: _this.td,
            type: 'line'
          }]
        };
        myChart10.setOption(option10);

        var myChart11 = echarts.init(document.getElementById('main11'));
        var option11 = {
          title: {
            text: '未来一天紫外线指数'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} '
            }
          },
          series: [{
            data: _this.uv,
            type: 'line'
          }]
        };
        myChart11.setOption(option11);

        var myChart12 = echarts.init(document.getElementById('main12'));
        var option12 = {
          title: {
            text: '可见度'
          },
          xAxis: {
            data: _this.dt
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} m'
            }
          },
          series: [{
            data: _this.v,
            type: 'line'
          }]
        };
        myChart12.setOption(option12);


      })
    }
  }
}
</script>

<style>
/* .mainBody{
  background-image: url('./assets/wallhaven-0wm38r.png');
  width: 1080px;
  height: 1080px;
} */
</style>
